<template>
  <div class="model-main">
    <a-spin class="model-main-left menuBox" tip="Loading..." :spinning="spinning">
      <a-input-search v-model="searchValue" placeholder="请输入名称搜索" @change="onSearch" />
      <a-menu v-model="menuValue" @click="onMenuSelect">
        <a-menu-item v-for="(item, index) in menuData" :key="item.id">
          {{ item.taskName }}
        </a-menu-item>
      </a-menu>
    </a-spin>
    <a-card class="model-main-right" :bordered="false" :bodyStyle="bodyStyle">
      <div class="c-table" v-if="isTable">
        <task-user :taskId="taskId" @selectItemClick="onSelectItemClick" />
      </div>
      <slot></slot>
    </a-card>
  </div>
</template>

<script>
import * as eventModelApi from '@/api/wxSmuggle/eventModel.js'
import taskUser from './taskUser'
export default {
  props: {
    // 是否加载目标人员表格
    isTable: {
      type: Boolean,
      default: true
    },
    bodyStyle: {
      type: Object
    }
  },
  components: {
    taskUser
  },
  name: 'taskContainer',
  data() {
    return {
      menuData: [],
      menuDataTemp: [],
      spinning: false,
      searchValue: '',
      loading: false,
      menuValue: [],
      incidentId: null,
      modelId: null,
      queryTaskId: null,
      form: {},
    }
  },
  created() {
    this.getRouteQuery(this.$route)
  },
  computed: {
    taskId() {
      let taskId = this.menuValue && this.menuValue.length > 0 ? this.menuValue[0] : null
      return taskId
    }
  },
  watch: {
    $route(data) {
      console.log(data)
      this.getRouteQuery(data)
    },
    queryTaskId() {
      this.getAllList()
    }
  },
  methods: {
    // 搜索框
    onSearch() {
      this.menuData = this.menuDataTemp.filter(item => item.taskName.indexOf(this.searchValue) > -1)
    },
    // 点击左边任务-传递taskId
    onMenuSelect(e) {
      let key = e && e.key ? e.key : null
      if (key) {
        this.$emit('menuItemClick', key)
      } else if (this.menuValue.length > 0) {
        this.$emit('menuItemClick', this.menuValue[0])
      } else {
        this.$emit('menuItemClick', null)
      }
    },
    onSelectItemClick(item) {
      this.$emit('selectItemClick', item)
    },
    // 获取任务列表
    getAllList() {
      let form = {
        incidentId: this.incidentId, //案事件id
        modelId: this.modelId
      }
      eventModelApi
        .getAllList(form)
        .then(res => {
          if (res.success) {
            this.menuData = res.result ? res.result : []
            this.menuDataTemp = res.result ? res.result : []
            let item = this.menuData.find(obj => {
              return obj.id == this.queryTaskId
            })
            // 案事件传递的taskId包含在任务列表里，则选中这条任务
            if (item && Object.keys(item).length > 0) {
              this.menuValue = [item.id]
              this.onMenuSelect()
            } else {
              // 案事件传递的taskId不包含在任务列表里，则选中第一条任务列表数据
              if (this.menuData && this.menuData.length > 0) {
                let id = this.menuData[0].id
                this.menuValue = [id]
                this.onMenuSelect()
              }
            }
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch(e => {
          this.$message.warn('请求失败！')
        })
    },
    // 监听路由变化
    getRouteQuery($route) {
      if ($route.query && Object.keys($route.query).length > 0) {
        let query = $route.query
        if (query.modelId) {
          this.modelId = query.modelId
        }
        if (query.taskId) {
          this.queryTaskId = query.taskId
        }
        if (query.incidentId) {
          this.incidentId = query.incidentId
        }
        //人物画像和通信行为使用，需要传taskId和approvalId
        this.$emit('setQuery', query)
        //其他模型通用
        let str = query.isOperation.toString()
        if (str == 'true') {
          this.$emit('setOperation', true) //发起人
        } else {
          this.$emit('setOperation', false) //审批人
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.model-main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}
.model-main-left {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  margin-right: 12px;
  background-color: #fff;
  padding: 12px;
}
.model-main-right {
  flex: 1;
  min-height: 600px;
  /deep/.ant-card-body {
    display: flex;
    > * {
      flex: 1;
      margin-right: 20px;
      width: 0;
      &.c-table {
        flex: 0.8;
      }
      &:last-child {
        margin-right: 0;
      }
    }
  }
}
/deep/.ant-menu-vertical {
  border-right-width: 0;
}
/deep/.row-selected {
  background-color: #e6f7ff;
}
/deep/.ant-table-row {
  cursor: pointer;
}
</style>
